<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>平台信息 | Electron × 鸿蒙</title>
    <!-- 页面用于单独展示当前运行平台信息。通过 preload 暴露的 electronAPI 读取数据。 -->
    <style>
      :root {
        color-scheme: light dark;
      }
      body {
        margin: 0;
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
        background: #0f172a;
        color: #e5e7eb;
        display: grid;
        place-items: center;
        min-height: 100vh;
      }
      .card {
        width: min(720px, 92vw);
        background: rgba(255,255,255,0.06);
        backdrop-filter: blur(6px);
        border-radius: 16px;
        padding: 24px 28px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.35);
        border: 1px solid rgba(255,255,255,0.12);
      }
      h1 {
        margin: 0 0 12px;
        font-size: 22px;
      }
      .desc {
        margin: 0 0 18px;
        color: #cbd5e1;
        font-size: 14px;
      }
      .list {
        display: grid;
        gap: 10px;
      }
      .item {
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.14);
        padding: 12px 14px;
        border-radius: 10px;
      }
      .k {
        color: #93c5fd;
      }
      code {
        color: #facc15;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      }
      footer {
        margin-top: 16px;
        font-size: 12px;
        color: #94a3b8;
      }
    </style>
  </head>
  <body>
    <main class="card" aria-labelledby="title">
      <h1 id="title">当前系统平台信息</h1>
      <p class="desc">以下信息来自 Electron 预加载脚本，适配鸿蒙场景。</p>
      <section class="list" aria-describedby="title">
        <div class="item"><span class="k">方式一 · process.platform</span>：<code id="p-m1">-</code></div>
        <div class="item"><span class="k">方式二 · os.platform()</span>：<code id="p-m2">-</code></div>
        <div class="item"><span class="k">方式三 · os.type()</span>：<code id="p-m3">-</code></div>
        <div class="item"><span class="k">方式四 · navigator.platform</span>：<code id="p-m4">-</code></div>
        <div class="item"><span class="k">方式五 · navigator.userAgent</span>：<code id="p-m5">-</code></div>
        <div class="item"><span class="k">原始 · 运行平台（process.platform）</span>：<code id="p-process">-</code></div>
        <div class="item"><span class="k">原始 · 操作系统平台（os.platform()）</span>：<code id="p-os-platform">-</code></div>
        <div class="item"><span class="k">内存 · 总量</span>：<code id="p-mem-total">-</code></div>
        <div class="item"><span class="k">内存 · 可用</span>：<code id="p-mem-free">-</code></div>
        <div class="item"><span class="k">内存 · 已用</span>：<code id="p-mem-used">-</code></div>
        <div class="item"><span class="k">CPU · 逻辑核心数</span>：<code id="p-cpu-count">-</code></div>
        <div class="item"><span class="k">CPU · 型号</span>：<code id="p-cpu-model">-</code></div>
        <div class="item"><span class="k">系统负载 · 最近 1/5/15 分钟</span>：<code id="p-load-avg">-</code></div>
        <div class="item"><span class="k">磁盘 · 总量</span>：<code id="p-disk-total">-</code></div>
        <div class="item"><span class="k">磁盘 · 已用</span>：<code id="p-disk-used">-</code></div>
        <div class="item"><span class="k">磁盘 · 可用</span>：<code id="p-disk-free">-</code></div>
        <div class="item"><span class="k">磁盘 · 使用率</span>：<code id="p-disk-pct">-</code></div>
      </section>
      <footer>Electron 页面本地加载；在鸿蒙容器中值以实际设备/容器为准。</footer>
    </main>

    <script>
      // 读取由 preload 暴露的 getPlatformInfo（含五种方案），在接口就绪后填充到页面
      window.addEventListener('DOMContentLoaded', () => {
        const setText = (id, value) => {
          const el = document.getElementById(id);
          if (el) el.textContent = value ?? '未知';
        };

        const fmtBytes = (n) => {
          if (!Number.isFinite(n) || n <= 0) return '未知';
          const units = ['B','KB','MB','GB','TB'];
          let i = 0; let v = n;
          while (v >= 1024 && i < units.length - 1) { v /= 1024; i++; }
          return `${v.toFixed(2)} ${units[i]}`;
        };

        const tryFill = () => {
          try {
            const api = window.electronAPI;
            console.log('[index] electronAPI available=', !!api, 'type=', typeof api?.getPlatformInfo);
            if (api && typeof api.getPlatformInfo === 'function') {
              const info = api.getPlatformInfo();
              console.log('[index] getPlatformInfo()', info);
              setText('p-m1', info?.method1);
              setText('p-m2', info?.method2);
              setText('p-m3', info?.method3);
              setText('p-m4', info?.method4);
              setText('p-m5', info?.method5);
              // 兼容旧占位（如果还存在）
              setText('p-way1', info?.method3);
              setText('p-way2', info?.method1);
              setText('p-way3', info?.method5);
              setText('p-process', info?.raw?.processPlatform);
              setText('p-os-platform', info?.raw?.osPlatform);

              // 统计数据
              const s = info?.stats;
              setText('p-mem-total', fmtBytes(s?.memory?.total));
              setText('p-mem-free', fmtBytes(s?.memory?.free));
              setText('p-mem-used', fmtBytes(s?.memory?.used));
              setText('p-cpu-count', s?.cpu?.count);
              setText('p-cpu-model', s?.cpu?.model);
              setText('p-load-avg', Array.isArray(s?.loadavg) ? s.loadavg.join(', ') : '未知');
              setText('p-disk-total', fmtBytes(s?.disk?.total));
              setText('p-disk-used', fmtBytes(s?.disk?.used));
              setText('p-disk-free', fmtBytes(s?.disk?.free));
              setText('p-disk-pct', s?.disk?.percent);
              return true;
            }
          } catch (e) {
            console.warn('读取平台信息失败:', e);
          }
          return false;
        };

        // 立即尝试一次；若未就绪，进行短轮询等待预加载接口暴露
        if (tryFill()) return;
        let attempts = 0;
        const timer = setInterval(() => {
          if (tryFill() || ++attempts > 30) {
            clearInterval(timer);
          }
        }, 100);

          // 若最终仍未填充，使用异步兜底从主进程拉取
          setTimeout(async () => {
            try {
              const api = window.electronAPI;
              if (api && typeof api.fetchPlatformInfo === 'function') {
                const info = await api.fetchPlatformInfo();
                console.log('[index] fetchPlatformInfo()', info);
                setText('p-m1', info?.method1);
                setText('p-m2', info?.method2);
                setText('p-m3', info?.method3);
                // m4/m5 主进程不可用，保留原值
                setText('p-process', info?.raw?.processPlatform);
                setText('p-os-platform', info?.raw?.osPlatform);
                // 主进程兜底返回的内存/CPU/磁盘
                const s = info?.stats;
                if (s) {
                  setText('p-mem-total', fmtBytes(s?.memory?.total));
                  setText('p-mem-free', fmtBytes(s?.memory?.free));
                  setText('p-mem-used', fmtBytes(s?.memory?.used));
                  setText('p-cpu-count', s?.cpu?.count);
                  setText('p-cpu-model', s?.cpu?.model);
                  setText('p-load-avg', Array.isArray(s?.loadavg) ? s.loadavg.join(', ') : '未知');
                  setText('p-disk-total', fmtBytes(s?.disk?.total));
                  setText('p-disk-used', fmtBytes(s?.disk?.used));
                  setText('p-disk-free', fmtBytes(s?.disk?.free));
                  setText('p-disk-pct', s?.disk?.percent);
                }
              }
            } catch (e) {
              console.warn('异步兜底获取平台信息失败:', e);
            }
          }, 3500);
      });
    </script>
  </body>
  </html>